Element el

2024-02-24 02:40| 来源: 网络整理| 查看: 265

点此查看全部文字教程、视频教程、源代码

本文目录 1. 背景2. 全局样式3. 布局代码4. 增加导航菜单5. 小结

1. 背景

由于一般的网页布局，也就是分个侧边导航栏，顶部标题栏，中间内容区域，以及底部版权信心栏。

element为了方便开发人员使用，直接提供了布局容器组件，可以很方便的直接生成上述的布局栏。

2. 全局样式

为了让网页的布局占满屏幕，一般在开始布局之前，设定下全局样式，修改index.html，添加全局样式代码如下。

html,body,#app{ height:100%; margin: 0px; padding: 0px; } 3. 布局代码

通过如下几个标签设置布局即可：

：外层容器。当子元素中包含或时，内部子元素会垂直排列。针对其他元素，则会水平排列。：顶部栏容器。：侧边栏容器。：内容区域容器。：底部栏容器。

我们开发一个页面如下：

为了便于区分各个区域，我们设置样式如下：

.el-container { height: 100%; } .el-header, .el-footer { background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #d3dce6; color: #333; text-align: center; line-height: 200px; } .el-main { background-color: #e9eef3; color: #333; text-align: center; line-height: 160px; } .el-menu { background-color: #d3dce6; }

此时效果如下：在这里插入图片描述

4. 增加导航菜单

左侧内容区域可以添加导航菜单，由于导航菜单不是本节讲解内容，所以只是给出示例：

导航一菜单1 菜单2 菜单3 导航二导航三

此时效果如下：在这里插入图片描述

5. 小结

element封装的布局容器足够简单了，说实话感觉没法更简单了。

如果在使用element时，建议直接采用官方提供的布局容器组件，这样兼容性和稳定性会比较好。

【本文地址】

公司简介

联系我们